<template>
    <div class="branch">
        <div class="breadcrumbs">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-sm-4">
                        <h1>
                            服务网点
                        </h1>
                    </div>
                    <div class="col-lg-8 col-sm-8">
                        <ol class="breadcrumb pull-right">
                            <li>
                                <a href="#">
                                    首页
                                </a>
                            </li>
                            <li class="active">
                                /服务网点
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="left">
                <div class="site">
                    <p>地址:</p>
                    <p>山东省淄博市张店区马尚街道办事处人民西路188号</p>
                </div>
                <div class="phone">
                    <p>联系电话:</p>
                    <p>0533-6679523</p>
                </div>
                <!--  <div class="erweima">
          <p>官方微信服务</p>
          <img src="../assets/images/erweima.jpg" alt="" class="ewmimg" />
        </div> -->
            </div>
            <div class="right">
                <p>给我们的留言</p>
                <h3>姓名</h3>
                <input id="name" type="text"/>
                <h3>邮箱</h3>
                <input id="email" type="text"/>
                <h3>电话</h3>
                <input id="phone" type="text"/>
                <h3>留言信息</h3>
                <textarea name="" id="comment" cols="30" rows="10"></textarea>
                <!-- <button  data-method="offset" data-type="auto" class="layui-btn layui-btn-normal">提交</button> -->
                <button @click="mssageButtom()">提交</button>
            </div>
        </div>



</template>
<script src="../js/jquery-3.5.1.min.js"></script>

<script>
    import {insertMsg} from "@/utils/api.js" //@相当于相对路径从根src路径往下开始

    export default {
        data() {
            return {
                dialogVisible: true
            }
        },
        mounted() {

            window.onLoad = function () {
                var map = new AMap.Map('container', {
                    center: [118.000071, 36.81647],
                    zoom: 11
                });
                var marker = new AMap.Marker({
                    position: [118.000071, 36.81647], //位置
                })
                map.add(marker);
            }
            var url = 'https://webapi.amap.com/maps?v=1.4.15&key=ae72187b2119846b9d50051f98e852b9&callback=onLoad';
            var jsapi = document.createElement('script');
            jsapi.charset = 'utf-8';
            jsapi.src = url;
            document.head.appendChild(jsapi);
        },
        methods: {


            mssageButtom() {
                if ($("#comment").val().length == 0 || $("#email").val().length == 0) {
                    alert("请填写相关信息")
                    return;
                }
                const form = {
                    "messageContent": $("#comment").val(),
                    "messageEmail": $("#email").val(),
                    "messageName": $("#name").val(),
                    "messagePhone": $("#phone").val(),
                }
                // 需要import {insertMsg }from "@/utils/api.js" 相当于java 导入依赖
                insertMsg(form).then(response => { // .then 字面意思 然后
                    if (response.resultCode === 200) { //response.resultCode 后台的返回结果 String类型昨天把我坑惨了 哪个写的
                        alert("留言成功");
                    } else {
                        alert("留言失败");
                    }
                });
            }
        }
    };
</script>

<style lang="less" scoped>
    .breadcrumbs {
        background: #34495e;
        color: #fff;
        padding: 30px 0;
        margin-bottom: 40px;
        width: 2255px;
        margin-left: -352px;
        height: 28px;
    }

    .breadcrumbs h1 {
        font-size: 24px;
        font-weight: 600;
        margin: 3px 0 0;
        text-transform: uppercase;
        margin-left: 31%;
        margin-top: 0%;
    }

    .breadcrumb {
        margin-bottom: 0;
        background: none;
        font-size: 16px;
        margin-left: 75%;
        margin-top: -23px;
    }

    .breadcrumb li a {
        color: #48cfad;
    }

    .breadcrumb li.active {
        color: #fff;
    }

    .breadcrumb > li {
        display: inline-block;
    }

    .branch {
    }

    .box {
        display: flex;
        margin: 20px auto;
        width: 1200px;
    }

    .left {
        width: 500px;
        line-height: 30px;
        margin-right: 40px;
    }

    .site,
    .phone,
    .erweima {
        padding: 10px;
        border: 1px solid #ccc;
        margin-bottom: 20px;
    }

    .right {
        flex: 1;
    }

    p {
        padding-bottom: 30px;
        color: #797979;
    }

    h3 {
        color: #797979;
    }

    textarea,
    input {
        width: 100%;
        margin-bottom: 20px;
        outline: none;
        border-radius: 5px;
        border: 1px solid #ccc;
        text-indent: 5px;
    }

    input {
        height: 34px;
    }

    button {
        display: block;
        margin: 10px auto;
        width: 160px;
        height: 40px;
        background: #37bc9b;
        color: #fff;
        outline: none;
        border: none;
        border-radius: 20px;
    }

    #container {
        height: 500px;
        width: 100%;

    }


</style>
